<template>
    <div>
        <!-- 运营档案-营运单位 -->
        <el-row>
            <el-col :span="24">
                <div class="container">
                    <el-row class="head-fun">
                        <el-col :span="24">
                            <div class="lf choose-title">站内名称</div>
                            <el-input v-model="zhanName" size="mini" style="width:150px" class="choose-input lf"></el-input>
                            <div class="lf choose-title">负责人</div>
                            <el-input v-model="chargeMan" size="mini" style="width:150px" class="choose-input lf"></el-input>
                            <div class="lf choose-title">联系电话</div>
                            <el-input v-model="phone" size="mini" style="width:150px" class="choose-input lf"></el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24" class="table-fun">
                            <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="refresh">刷新</div>
                            <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="addWin=true">添加</div>
                            <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="modWin=true">修改</div>
                            <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="del">删除</div>
                            <img src="../../assets/imgs/operation_icon_shuju_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="tongbu">同步数据中心</div>
                        </el-col>
                    </el-row>
                    <!-- 表格数据 -->
                    <el-row>
                        <el-col :span="24">
                            <avue-crud :data="unitList[0].data" :option="unitList[0].option" @current-row-change="rowChange" class="unit-table" @current-change="unitPage" :page="unitList[0].page"></avue-crud>
                        </el-col>
                    </el-row>
                    <!-- 弹窗 -->
                    <!-- 添加弹窗 -->
                    <div class="modal-win" v-show="addWin">
                      <div class="add-container">
                          <div class="closeWin" @click="addWin=false">X</div>
                          <!-- 标题栏 -->
                          <el-row class="add-title">
                              <el-col :span="24">
                                  <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">添加</span>
                              </el-col>
                          </el-row>
                          <!-- 表单栏 -->
                          <el-row>
                            <el-col :span="24">
                              <avue-form ref="form" v-model="addForm" :option="addOption" class="yz-form"></avue-form>
                            </el-col>
                          </el-row>
                          <button class="check-btn rf" @click="addWin=false">
                              <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                          <button class="check-btn rf custom-btn" @click="add"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确定</button>
                      </div>
                    </div>
                    <!-- 修改弹窗 -->
                    <div class="modal-win" v-show="modWin">
                      <div class="add-container">
                          <div class="closeWin" @click="modWin=false">X</div>
                          <!-- 标题栏 -->
                          <el-row class="add-title">
                              <el-col :span="24">
                                  <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">修改</span>
                              </el-col>
                          </el-row>
                          <!-- 表单栏 -->
                          <el-row>
                            <el-col :span="24">
                              <avue-form ref="form" v-model="modForm" :option="modOption" class="yz-form"></avue-form>
                            </el-col>
                          </el-row>
                          <button class="check-btn rf" @click="modWin=false">
                            <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                          <button class="check-btn rf custom-btn" @click="update"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确定</button>
                      </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- 同步弹窗 -->
        <div class="tong-win" v-show="tongbuShow">
            <div class="tongbu-text">同步中心数据</div><div class="closeWin" @click="tongbuShow=false">X</div>
            <avue-crud :data="tongbuList[0].data" :option="tongbuList[0].option" @current-row-change="rowChange" class="unit-table" @current-change="unitPage" :page="tongbuList[0].page"></avue-crud>
        </div>
    </div>
</template>

<script>
import qs from "qs";
import TableData from "../../components/common/tableData"
export default {
  data: function() {
    return {
      activeTag: "4-1",
      zhanName: "",
      currentRow:"",
      chargeMan: "",
      phone: "",
      tongbuList: [
        {
          page: {
            pageSizes: [10],
            total: 2,
            currentPage: 1,
            pageSize: 10
          },
          data: [],
          option: {
            highlightCurrentRow:true,
            page: true,
            stripe: true,
            menu: false,
            align: "center",
            menuAlign: "center",
            column: []
          }
        }
      ],
      unitList: [
        {
          page: {
            pageSizes: [10],
            total: 2,
            currentPage: 1,
            pageSize: 10
          },
          data: [],
          option: {
            highlightCurrentRow:true,
            page: true,
            stripe: true,
            menu: false,
            align: "center",
            menuAlign: "center",
            column: []
          }
        }
      ],
      replaceList: [0],
      refreshList: [],
      tongbuRules: {
        sort: "name",
        order: "desc",
        page: "1",
        rows: "30"
      },
      pageSize: 0,
      pageNum: 1,
      totalPage: 0,
      addWin:false,
      addForm:{},
      addOption:{
        column:[
          {
            disabled:true,
            label:"统一编码",
            prop:"tNum",
            span:8
          },
          {
            disabled:true,
            label:"统一名称",
            prop:"tName",
            span:16
          },
          {
            label:"单位编码",
            prop:"cNum",
            span:8
          },
          {
            label:"单位全称",
            prop:"compAll",
            span:16
          },
          {
            label:"财务编码",
            prop:"pNum",
            span:8
          },
          {
            label:"简称",
            prop:"smName",
            span:8
          },
          {
            label:"区域号",
            prop:"xNum",
            span:8
          },
          {
            label:"负责人",
            prop:"rePeople",
            span:8
          },
          {
            label:"联系电话",
            prop:"phone",
            span:8
          },
          {
            label:"结算人",
            prop:"countPeople",
            span:8
          },
          {
            label:"银行名称",
            prop:"banName",
            span:8
          },
          {
            label:"银行账号",
            prop:"banNum",
            span:16
          },
          {
            label:"地址",
            prop:"address",
            span:24
          },
          {
            label:"备注",
            prop:"remark",
            span:24
          },
        ]
      },
      modWin:false,
      modForm:{},
      modOption:{
        column:[
          {
            label:"统一编码",
            prop:"tNum",
            span:8
          },
          {
            label:"统一名称",
            prop:"tName",
            span:16
          },
          {
            label:"单位编码",
            prop:"cNum",
            span:8
          },
          {
            label:"单位全称",
            prop:"compAll",
            span:16
          },
          {
            label:"财务编码",
            prop:"pNum",
            span:8
          },
          {
            label:"简称",
            prop:"smName",
            span:8
          },
          {
            label:"区域号",
            prop:"xNum",
            span:8
          },
          {
            label:"负责人",
            prop:"rePeople",
            span:8
          },
          {
            label:"联系电话",
            prop:"phone",
            span:8
          },
          {
            label:"结算人",
            prop:"countPeople",
            span:8
          },
          {
            label:"银行名称",
            prop:"banName",
            span:8
          },
          {
            label:"银行账号",
            prop:"banNum",
            span:16
          },
          {
            label:"地址",
            prop:"address",
            span:24
          },
          {
            label:"备注",
            prop:"remark",
            span:24
          },
        ]
      },
      tongbuShow:false
    };
  },
  methods: {
    unitPage(val){
      this.unitList[0].page.currentPage=val;
      if(this.replaceList[0]==0){
        this.getUnitList();
      }else{
        this.tongbu();
      }
    },
    unitPage(val){
      this.unitList[0].page.currentPage=val;
      if(this.replaceList[0]==0){
        this.getUnitList();
      }else{
        this.tongbu();
      }
    },
    getUnitList() {
      this
        .postRequest("/sch/data/bus_company/list",{
          rows:10,
          page:this.unitList[0].page.currentPage
        })
        .then(data => {
          console.log(data);
          this.unitList[0].page.total=data.data.totalRow;
          this.unitList[0].data=data.data.list;
        });
    },
    add() {
      this
        .getRequest(
          "/sch/data/bus_company/add?busCompany.id=&busCompany.official_code="+this.addForm.tNum+"&busCompany.official_name="+this.addForm.tName+"&busCompany.code="+this.addForm.cNum+"&busCompany.name="+this.addForm.compAll+"&busCompany.finance_code="+this.addForm.pNum+"&busCompany.name_short="+this.addForm.smName+"&busCompany.region_id="+this.addForm.xNum+"&busCompany.address="+this.addForm.address+"&busCompany.jsname="+this.addForm.rePeople+"&busCompany.phone="+this.addForm.phone+"&busCompany.principal="+this.addForm.countPeople+"&busCompany.bankname="+this.addForm.banName+"&busCompany.bankno="+this.addForm.banNum+"&busCompany.remark="+this.addForm.remark
        )
        .then(data => {
          console.log(data);
          var item = data.data[1];
          if (data.data[0] == -1) {
            this.$message.error("添加失败！请检查！");
          } else {
            this.$message({
                message: data.data[1],
                type: 'success'
              });
            this.refresh();
          }
        });
    },
    del() {
      this
        .postRequest(
          "/sch/data/bus_company/del",
          {
            id:this.currentRow.id
          }
        )
        .then(data => {
          console.log(data);
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.refresh();
          } else {
            this.$message.error("删除失败");
          }
        });
    },
    update() {
      this
        .getRequest(
          "/sch/data/bus_company/update?busCompany.id="+this.currentRow.id+"&busCompany.official_code="+this.modForm.tNum+"&busCompany.official_name="+this.modForm.tName+"&busCompany.code="+this.modForm.compAll+"&busCompany.name="+this.modForm.tName+"&busCompany.finance_code="+this.modForm.pNum+"&busCompany.name_short="+this.modForm.smName+"&busCompany.region_id="+this.modForm.xNum+"&busCompany.address="+this.modForm.address+"&busCompany.jsname="+this.modForm.rePeople+"&busCompany.phone="+this.modForm.phone+"&busCompany.principal="+this.modForm.countPeople+"&busCompany.bankname="+this.modForm.banName+"&busCompany.bankno="+this.modForm.banNum+"&busCompany.remark="+this.modForm.remark
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.modWin=false;
          }else{
             this.$message.error(data.data[1]);
          }
        });
    },
    tongbu() {
      this.tongbuShow=true;
      var that = this;
      this
        .postRequest(
          "/sync/center/data/base/buscompany",
          {
            rows:4,
            page:that.tongbuList[0].page.currentPage
          }
        )
        .then(data => {
          console.log(data);
           this.tongbuList[0].page.total=data.data.totalRow;
          // this.unitList=data.data.list;
          this.replaceList=data.data.list
          this.tongbuList[0].data = this.replaceList;
          this.replaceList=[];
        });
    },
    refresh() {
      this.unitList[0].data = [];
      this
        .postRequest("/sch/data/bus_company/list",{
          rows:10,
          page:this.unitList[0].page.currentPage
        })
        .then(data => {
          this.unitList[0].page.total=data.data.totalRow;
          this.refreshList=data.data.list;
          this.unitList[0].data = this.refreshList;
          this.refreshList = [];
        });
    },
    handleCurrentChange(val) {
      this.$http
        .post(
          "/sch/data/bus_company/list",
          qs.stringify({ page: val })
        )
        .then(data => {
          for (var item of data.data.list) {
            this.refreshList.push({
              remark: item.remark,
              create_time: item.create_time,
              adjust_type: item.adjust_type,
              adjust_para: item.adjust_para,
              jsname: item.jsname,
              bankno: item.bankno,
              bankname: item.bankname
            });
          }
        });
    },
    tableCreate() {
      this.tongbuList[0].option.column.push(
        {
          label: "单位代码",
          prop: "code"
        },
        {
          label: "站内名称",
          prop: "official_name"
        },
        {
          label: "车牌号",
          prop: "id"
        },
        {
          label: "财务编码",
          prop: "finance_code"
        },
        {
          label: "负责人",
          prop: "jsname"
        },
        {
          label: "指定结算人",
          prop: "bankno"
        },
        {
          label: "银行名称",
          prop: "bankname"
        },
      );
      this.unitList[0].option.column.push(
        {
          label: "单位代码",
          prop: "code"
        },
        {
          label: "站内名称",
          prop: "official_name"
        },
        {
          label: "车牌号",
          prop: "id"
        },
        {
          label: "财务编码",
          prop: "finance_code"
        },
        {
          label: "负责人",
          prop: "jsname"
        },
        {
          label: "指定结算人",
          prop: "bankno"
        },
        {
          label: "银行名称",
          prop: "bankname"
        },
      );
    },
    rowChange(val){
      console.log(val);
      this.currentRow=val;
      this.modForm.tNum=val.finance_code;
      this.modForm.tName=val.official_name;
      this.modForm.cNum=val.code;
      this.modForm.compAll=val.name;
      this.modForm.smName=val.name_short;
      this.modForm.xNum=val.region_id;
      this.modForm.rePeople=val.jsname;
      this.modForm.phone=val.phone;
      this.modForm.countPeople=val.principal;
      this.modForm.banName=val.bankname;
      this.modForm.bankno=val.bankno;
      this.modForm.remark=val.remark;
    }
  },
  computed: {},
  components:{TableData},
  watch: {},
  mounted() {
    console.log("unit");
    this.$emit("sendActive", this.activeTag);
    this.tableCreate();
    this.getUnitList();
    this.refresh();
  }
};
</script>
<style scoped src="../../assets/css/service/unit.css">
</style>